<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head lang="en">
    <meta charset="UTF-8">
    <title>后台管理</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script src="https://unpkg.com/@antv/g2@latest"></script>

    <link rel="icon" href="./shop.ico" type="image/x-icon">

    <style>
        #live2dcanvas {
            border: 0 !important;
        }


        .district_experience_share {
            margin-bottom: 10px;
        }

        .district_experience_share .tab {
            white-space: nowrap;
            overflow-y: hidden;
            /* overflow-x: scroll;
            -webkit-overflow-scrolling: touch; */
            border-bottom: 0.5px solid #ddd;
        }

        .district_experience_share .tab ul {
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            display: flex;
        }

        .district_experience_share .tab ul li {
            display: inline-block;
            flex: 1;
            position: relative;
            text-align: center;
            max-width: 50%;
            cursor: pointer;
            margin-left: 15px;
        }

        .district_experience_share .tab ul li:first-child {
            margin-left: 15px;
        }

        .district_experience_share .tab ul li:last-child {
            margin-right: 15px;
        }

        .district_experience_share .tab ul li.selected {
            color: #49c114;
        }

        .district_experience_share .tab ul li.selected::after {
            content: "";
            height: 2px;
            width: 100%;
            background: #49c114;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .tab_box {
            padding-bottom: 5px;
            display: none;
        }

        .tab_box.selected {
            display: block;
        }

        .tab_box ul > li {
            border-bottom: none;
            padding: 0;
            border-radius: 5px;
            vertical-align: top;
            white-space: normal;
            margin-bottom: 10px;
            padding-bottom: 10px;
        }

        .btn {
            background: #53b5aa;
            border: 1px solid #999;
            border-style: none none solid none;
            cursor: pointer;
            display: block;
            color: #fff;
            font-size: 20px;
            font-weight: 300;
            padding: 16px 0;
            width: 290px;
            text-align: center;

            -webkit-transition: all .2s linear;
            -moz-transition: all .2s linear;
            -ms-transition: all .2s linear;
            -o-transition: all .2s linear;
            transition: all .2s linear;
        }

        .btn:hover {
            color: #fff;
            background: #429188;
        }

        .top-line {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding-left: 10px;
        }

        .top-line div {
            flex-grow: 1;
            margin-left: 10px;
        }


        table {
            width: auto;
            table-layout: fixed;
            border-collapse: collapse;
        }

        th {
            text-decoration: underline;
        }

        th,
        td {
            padding: 5px;
            text-align: left;
        }

        td:nth-child(1),
        th:nth-child(1) {
            min-width: 200px;
        }

        td:nth-child(2),
        th:nth-child(2) {
            min-width: 400px;
        }

        tbody {
            display: block;
            overflow: auto;
            width: 100%;
            height: auto;
        }

        tbody input {
            width: 90%;
        }

        tr:nth-child(even) {
            background-color: #DDD;
        }

        .my-container {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .page2-top-container {
            margin: 10px 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .page3-container {
            display: flex;
            width: 100%;
            flex-direction: row;
            justify-content: space-around;
        }

        .page3-left {
            width: 40%;
        }

        .page3-right {
            width: 55%;
        }
    </style>
</head>

<body>
<div class="top-line">
    <svg t="1637756515867" class="icon" viewBox="0 0 1112 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
         p-id="2302" width="32" height="32">
        <path
                d="M1112.702976 772.388571V81.92A105.325714 105.325714 0 0 0 1013.22869 0h-936.228571a111.177143 111.177143 0 0 0-58.514286 46.811429A128.731429 128.731429 0 0 0 0.931547 128.731429v643.657142a111.177143 111.177143 0 0 0 46.811429 87.771429 175.542857 175.542857 0 0 0 76.068571 11.702857h392.045715v76.068572H211.582976a35.108571 35.108571 0 0 0-35.108571 35.108571 40.96 40.96 0 0 0 35.108571 40.96h690.468571a40.96 40.96 0 0 0 35.108572-40.96 35.108571 35.108571 0 0 0-35.108572-35.108571h-304.274285v-76.068572h444.708571a99.474286 99.474286 0 0 0 70.217143-99.474286zM100.405833 76.068571z m-11.702857 5.851429z m0 0z m-5.851429 702.171429z m5.851429 5.851428z m942.08-11.702857v11.702857H77.000119V99.474286h5.851428a5.851429 5.851429 0 0 0 5.851429-5.851429h947.931429v678.765714h-5.851429z"
                p-id="2303"></path>
        <path
                d="M416.382976 397.897143a40.96 40.96 0 0 0-40.96 40.96 40.96 40.96 0 0 0 81.92 0 40.96 40.96 0 0 0-40.96-40.96zM556.817262 397.897143a40.96 40.96 0 0 0-40.96 40.96 40.96 40.96 0 0 0 81.92 0 40.96 40.96 0 0 0-40.96-40.96zM697.251547 397.897143a40.96 40.96 0 0 0-40.96 40.96 40.96 40.96 0 0 0 81.92 0 40.96 40.96 0 0 0-40.96-40.96z"
                p-id="2304"></path>
    </svg>
    <div>后台管理界面</div>
    <button class="btn" id="top-line-btn">返回主界面</button>
</div>
<div class="district_experience_share white_vessel">
    <div class="tab">
        <ul>
            <li class="selected">商品添加</li>
            <li>商品管理</li>
            <li>商品情况</li>
            <li>用户日志</li>
        </ul>
    </div>
    <div class="tab-content-list">

        <div class="tab_box selected">
            <div class="my-container">

                <table border="1" cellspacing="0" cellpadding="0">
                    <form class="page1-form" method="post" enctype="multipart/form-data">
                        <tr>
                            <td>商品名：</td>
                            <td>
                                <p><input type="text" name="name" id="page1-input-name" placeholder="输入商品名字">
                            </td>
                        </tr>
                        <tr>
                            <td>价格：</td>
                            <td>
                                <p><input type="number" name="price" id="page1-input-price" placeholder="输入商品价格">
                            </td>
                        </tr>
                        <tr>
                            <td>商品描述：</td>
                            <td>
                                <p><input type="text" name="description" id="page1-input-description"
                                          placeholder="输入商品描述">
                            </td>
                        </tr>
                    </form>
                    <tr>
                        <td>图片：</td>
                        <td>
                            <div class="control-group">
                                <label class="control-label">上传商品图片 :</label>
                                <div class="controls">
                                    <div>使用上传图片的方式添加商品图片</div>
                                    <!--这是一个display:none的div，不可见，在input中的值更改后会加载更改的图片，并显示在页面上-->
                                    <div class="display_none"></div>
                                    <!--在这里注意添加一个onchange事件，调用js里写的方法-->

                                    <form id="page1-form-image" role="form">
                                        <input type="file" name="file" class="form-control-file"
                                               id="exampleFormControlFile1" onchange="show(this)"/>
                                    </form>
                                    <div>--------------------------------------</div>
                                    <div>使用链接的方式添加商品图片:</div>
                                    <div>
                                        <input type="text" name="image" id="image-input" placeholder="输入图片网络地址链接">
                                    </div>
                                    <div>
                                        (备注：可不填，默认为item.png)
                                    </div>

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <button type="button"
                                    id="page1-btn-insert"
                                    style="width: 90%;margin: 5px 5%;">添加商品
                            </button>
                        </td>
                    </tr>
                </table>


            </div>

        </div>
        <div class="tab_box">
            <div class="user_content">
                <div class="my-container">
                    <form class="page2-top-form">
                        <div class="page2-top-container">商品id：<input type="number" name="id" id="page2-input-pid"
                                                                     placeholder="输入商品id"
                                                                     style="flex-grow: 1; margin: 0 5px;">
                            <button type="button"
                                    class="page2-btn-select">查询
                            </button>
                        </div>
                    </form>
                    <table border="1" cellspacing="0" cellpadding="0" style="display: none;"
                           class="page2-table">
                        <tr>
                            <td>商品名：</td>
                            <td><input type="text" name="name" id="page2-input-name" placeholder="输入商品名字"
                                       value="iPhone"></td>
                        </tr>
                        <tr>
                            <td>价格：</td>
                            <td><input type="number" name="price" id="page2-input-price" placeholder="输入商品价格" value="2">
                            </td>
                        </tr>
                        <tr>
                            <td>商品描述：</td>
                            <td><input type="text" name="description" id="page2-input-description" placeholder="输入商品描述"
                                       value="这是一段商品描述"></td>
                        </tr>
                        <tr>
                            <td>图片：</td>
                            <td>
                                <div class="control-group">
                                    <label class="control-label">上传商品图片 :</label>
                                    <div class="controls">
                                        <!--这是一个display:none的div，不可见，在input中的值更改后会加载更改的图片，并显示在页面上-->
                                        <div class="display_none"><img id="page2-image" src="item.png" width="150"
                                                                       height="150"/>
                                        </div>
                                        <!--在这里注意添加一个onchange事件，调用js里写的方法-->

                                        <form id="page2-form-image" role="form" method="post"
                                              enctype="multipart/form-data">
                                            <input type="file" name="file" class="form-control-file2"
                                                   id="exampleFormControlFile2" onchange="page2_show(this)"/>
                                        </form>


                                        <input type="text" name="description" id="page2-input-imagepath"
                                               placeholder="输入图片地址" value="这是一段图片链接">
                                    </div>
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <button type="button" id="page2-btn-modify"
                                        style="width: 29%;margin: 5px 10%;">修改
                                </button>
                                <button type="button" id="page2-btn-delete"
                                        style="width: 29%;margin: 5px 10%;">删除
                                </button>
                            </td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <div class="tab_box">
            <div class="user_content">
                <div class="my-container">
                    <div class="page3-container">
                        <div class="page3-left">
                            <div>查询某日销售额</div>
                            <input id="page3-input-date" type="date">
                            <div id="page3-div-money">暂未查询</div>
                            <div>-----------------------</div>
                            <div style="margin-bottom: 20px">过去7天销售报表</div>

                            <div id="myChart"></div>
                        </div>
                        <div class="page3-right">
                            <form class="page3-item-form">
                                <div>查询商品销售情况</div>
                                <input type="number" name="price" id="page3-input-pid" placeholder="输入商品pid">
                                <button type="button" id="page3-btn-search">查询</button>
                            </form>
                            <ol id="page3-ol">

                            </ol>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <div class="tab_box">
            <div class="user_content">
                <div class="my-container">
                    <div class="page3-container">
                        <div class="page3-left">
                            <div>
                                <div>查询用户浏览、购买记录</div>
                                <input type="number" name="price" id="page4-input" placeholder="输入用户uid">
                                <button type="button" id="page4-btn">查询</button>
                            </div>
                            <ol id="page4-ol">
                            </ol>
                        </div>
                        <div class="page3-right">
                            <div>
                                <div>查询用户订单记录</div>
                                <input type="number" name="price" id="page4-right-input" placeholder="输入用户uid">
                                <button type="button" id="page4-right-btn">查询</button>
                            </div>
                            <ol id="page4-right-ol">
                            </ol>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<script>
    let page1_image = "";

    let page2_pid = 0;

    let reportdata = [];

    $("#top-line-btn").click(function () {
        location.href = "index.html";
    });

    $(function () {
        $(".district_experience_share .tab ul li").click(function () {
            if ($(this).hasClass("selected")) {
                return;
            }
            var $parent = $(this).parent();
            var $tab_content_list = $('.district_experience_share .tab-content-list');
            $('.selected', $parent).removeClass('selected');
            $('.selected', $tab_content_list).removeClass('selected');
            $(this).addClass('selected');
            $('.tab_box', $tab_content_list).eq($(this).index()).addClass('selected');
        });

        $.ajax({
            url: "/log/getReport",
            type: "POST",
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    reportdata = json.data;


                    const data = reportdata;

                    const chart = new G2.Chart({
                        container: 'myChart',
                        autoFit: true,
                        height: 300,
                        width: 400
                    });
                    chart.data(data);


                    chart.tooltip({
                        showMarkers: false
                    });
                    chart.interaction('active-region');

                    chart.interval().position('date*money');

                    chart.render();


                } else {
                    console.log("report false");
                }
            },
            error: function () {
                console.log("report false");
            }
        });


    });


    function show(f) {
        var rd = new FileReader();//创建文件读取对象
        var files = f.files[0];//获取file组件中的文件
        rd.readAsDataURL(files);//文件读取装换为base64类型
        //显示在页面上，取消display:none;
        $(".display_none").show();
        rd.onloadend = function (e) {
            //加载完毕之后，在div中添加一个元素
            $(".display_none").html("<img src='" + this.result + "' width=\"150\" height=\"150\"/>")
        }

        console.log(new FormData($("#page1-form-image")[0]));
        $.ajax({
            url: "/product/change_avatar",
            type: "POST",
            data: new FormData($("#page1-form-image")[0]),
            dataType: "JSON",
            processData: false, // processData处理数据
            contentType: false, // contentType发送数据的格式
            success: function (json) {
                if (json.state == 200) {
                    alert("上传图片文件成功!");
                    console.log(json);
                    page1_image = json.data;

                    $("#image-input").val(json.data);

                } else {
                    alert("上传图片文件失败！" + json.message);
                }
            },
            error: function () {
                alert("上传图片文件失败！");
            }
        });
    };


    $("#page1-btn-insert").click(function () {
        console.log($(".page1-form").serialize() + "&image=" + page1_image);
        console.log($("#image-input").val());
        let str = "";
        if (page1_image == "") {
            console.log("debug===========>#image-input");
            str = $(".page1-form").serialize() + "&image=" + $("#image-input").val();
        } else {
            console.log("debug===========>page1_image");
            str = $(".page1-form").serialize() + "&image=" + $("#image-input").val();
            page1_image = "";
        }
        $.ajax({
            url: "/product/insertProduct",
            type: "POST",
            data: str,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    alert("添加成功!");
                    console.log(json);

                    $("#page1-input-name").val("");
                    $("#page1-input-price").val("");
                    $("#page1-input-description").val("");
                    $("#image-input").val("");


                } else {
                    alert("添加失败！" + json.message);
                }
            },
            error: function () {
                alert("添加失败！");
            }
        });
    })

    $(".page2-btn-select").click(function () {
        let pid = parseInt($("#page2-input-pid").val());
        console.log(pid);

        $.ajax({
            url: "/product/getProductDetail",
            type: "POST",
            data: "pid=" + pid,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    alert("查询商品成功!");
                    console.log(json);

                    page2_pid = pid;
                    $("#page2-input-name").val(json.data.name);
                    $("#page2-input-imagepath").val(json.data.image);

                    $("#page2-input-description").val(json.data.description);
                    $("#page2-input-price").val(json.data.price);

                    $("#page2-image").attr('src', json.data.image);

                    $('.page2-table').show();


                } else {
                    alert("查询商品失败！" + json.message);
                    page2_pid = 0;
                    $('.page2-table').hide();
                }
            },
            error: function () {
                alert("查询商品失败！可能商品已删除");
                page2_pid = 0;
                $('.page2-table').hide();
            }
        });

    });

    function page2_show(f) {
        var rd = new FileReader();//创建文件读取对象
        var files = f.files[0];//获取file组件中的文件
        rd.readAsDataURL(files);//文件读取装换为base64类型
        //显示在页面上，取消display:none;
        console.log(new FormData($("#page2-form-image")[0]));
        $.ajax({
            url: "/product/change_avatar",
            type: "POST",
            data: new FormData($("#page2-form-image")[0]),
            dataType: "JSON",
            processData: false, // processData处理数据
            contentType: false, // contentType发送数据的格式
            success: function (json) {
                if (json.state == 200) {
                    alert("上传图片文件成功!");
                    console.log(json);
                    $("#page2-input-imagepath").val(json.data);
                    rd.onloadend = function (e) {
                        $("#page2-image").attr('src', this.result);
                    }
                } else {
                    alert("上传图片文件失败！" + json.message);
                }
            },
            error: function () {
                alert("上传图片文件失败！");
            }
        });
    }

    $("#page2-btn-modify").click(function () {

        console.log(page2_pid);
        let str = "pid=" + page2_pid + "&name=" + $("#page2-input-name").val() + "&price=" + $("#page2-input-price").val() + "&description=" + $("#page2-input-description").val() + "&image=" + $("#page2-input-imagepath").val();
        console.log(str);

        $.ajax({
            url: "/product/updateProduct",
            type: "POST",
            data: str,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    alert("修改商品成功!");
                    console.log(json);

                    page2_pid = 0;
                    $("#page2-input-name").val('');
                    $("#page2-input-imagepath").val('');

                    $("#page2-input-description").val('');
                    $("#page2-input-price").val('');


                    $('.page2-table').hide();


                } else {
                    alert("修改商品失败！" + json.message);
                }
            },
            error: function () {
                alert("修改商品失败！");
            }
        });

    });

    $("#page2-btn-delete").click(function () {
        $.ajax({
            url: "/product/deleteProduct",
            type: "POST",
            data: "pid=" + page2_pid,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    alert("删除商品成功!");

                    page2_pid = 0;
                    $("#page2-input-name").val('');
                    $("#page2-input-imagepath").val('');

                    $("#page2-input-description").val('');
                    $("#page2-input-price").val('');


                    $('.page2-table').hide();


                } else {
                    alert("删除商品失败！" + json.message);
                }
            },
            error: function () {
                alert("删除商品失败！");
            }
        });
    });


    $("#page3-btn-search").click(function () {
        let pid = parseInt($("#page3-input-pid").val());
        console.log(pid);
        if (pid == NaN) {
            console.log("输入为空");
            return;
        }

        $.ajax({
            url: "/log/getProductReport",
            type: "POST",
            data: "pid=" + pid,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    alert("查询商品销售记录成功!");
                    let list = json.data;
                    $("#page3-ol").html("");
                    for (let i = 0; i < list.length; i++) {
                        str = "<li>" + list[i].pay_time + "  购买人uid:" + list[i].uid + "  购买数量:" + list[i].num + "  总价:" + list[i].total_price + "</li>"
                        $("#page3-ol").append(str);
                    }

                } else {
                    alert("查询商品销售记录失败！" + json.message);
                    $("#page3-ol").html("");
                }
            },
            error: function () {
                alert("查询商品销售记录失败！");
                $("#page3-ol").html("");
            }
        });

    });

    $("#page4-btn").click(function () {
        let uid = parseInt($("#page4-input").val());
        console.log(uid);
        if (uid == NaN) {
            console.log("输入为空");
            return;
        }

        $.ajax({
            url: "/log/getLog",
            type: "POST",
            data: "uid=" + uid,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    alert("查询用户日志成功!");

                    console.log(json.data);
                    let list = json.data;
                    $("#page4-ol").html("");
                    for (let i = 0; i < list.length; i++) {
                        let action = "";
                        if (list[i].action == 0) {
                            action = "浏览";
                        } else {
                            action = "购买";
                        }

                        str = "<li>" + list[i].time + "  " + action + "  商品id:" + list[i].pid + "</li>"
                        $("#page4-ol").append(str);
                    }


                } else {
                    alert("查询用户日志失败！" + json.message);
                    $("#page4-ol").html("");
                }
            },
            error: function () {
                alert("查询用户日志失败！");
                $("#page4-ol").html("");
            }
        });
    });

    $("#page4-right-btn").click(function () {
        let uid = parseInt($("#page4-right-input").val());
        console.log(uid);
        if (uid == NaN) {
            console.log("输入为空");
            return;
        }

        $.ajax({
            url: "/log/getOrderByUid",
            type: "POST",
            data: "uid=" + uid,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    alert("查询用户购买记录成功!");

                    console.log(json.data);
                    let list = json.data;
                    $("#page4-right-ol").html("");
                    for (let i = 0; i < list.length; i++) {
                        str = "<li>" + list[i].pay_time + "  商品pid:" + list[i].pid + "  购买数量:" + list[i].num + "  总价:" + list[i].total_price + "</li>"
                        $("#page4-right-ol").append(str);
                    }
                } else {
                    alert("查询用户购买记录失败！" + json.message);
                    $("#page4-right-ol").html("");
                }
            },
            error: function () {
                alert("查询用户购买记录失败！");
                $("#page4-right-ol").html("");
            }
        });
    });

    $("#page3-input-date").change(function () {
        let day=$("#page3-input-date").val();
        console.log(day);
        $.ajax({
            url: "/log/getDayReport",
            type: "POST",
            data: "day=" + day,
            dataType: "JSON",
            success: function (json) {
                if (json.state == 200) {
                    $("#page3-div-money").html("销售额为:"+json.data.money);

                } else {
                    $("#page3-div-money").html("销售额为:0");
                }
            },
            error: function (xhr) {
                alert("查询某日销售数据失败！"+xhr.message);

            }
        });
    })
</script>
</body>
</html>
